<template>
	<view class="steps-box">
		<view class="steps-content">
			<uv-steps :dot="true" direction="column">
			    <template v-for="(item,index) in list">
					<uv-steps-item  v-if="index<3">
						<template v-slot:title>
							<view class="steps-title uv-flex">
								<view class="uv-box-1 title">{{item.name}}</view>
								<view class="time">{{item.time}}</view>
							</view>
						</template>
						<template v-slot:desc>
							<view class="steps-desc">
								<view class="d-imgs uv-flex">
									<image @click="handlePreviewImg(i)"  v-for="i in item.imgs" :src="i" mode=""></image>
								</view>
								<view @click="handleCheck(item.name,item.child)" class="d-more">点击查看></view>
							</view>
						</template>
					</uv-steps-item>
					<uv-steps-item  v-else v-show="isMore">
						<template v-slot:title>
							<view class="steps-title uv-flex">
								<view class="uv-box-1 title">{{item.name}}</view>
								<view class="time">{{item.time}}</view>
							</view>
						</template>
						<template v-slot:desc>
							<view class="steps-desc">
								<view class="d-imgs uv-flex">
									<image  @click="handlePreviewImg(i)" v-for="i in item.imgs" :src="i" mode=""></image>
								</view>
								<view @click="handleCheck(item.name,item.child)" class="d-more">点击查看></view>
							</view>
						</template>
					</uv-steps-item>
					
				</template>
			</uv-steps>
		</view>
		<view class="more-btn uv-flex" v-if="list.length>=3" @click="isMore=!isMore">{{isMore?'收起':'查看更多'}}
			{{isMore?'↑':'↓'}}
		</view>
	</view>
</template>

<script setup>
	let	props = defineProps({
		list:{
			type:Array,
			default:[]
		}
	})
	const handlePreviewImg = (url)=>{
		console.log(url,'uuuuu')
		uni.previewImage({
			urls:[url],
		})
	}
	const isMore = ref(false);
	const emits = defineEmits(['changLook'])
	const handleCheck = (title,items)=>{
		emits('changLook',{
			title:title,
			items:items
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.uv-steps-item__wrapper){
		background-color: #fff;
		border: 1rpx solid #0C6F6A;
		border-radius: 50%;
		width:20rpx;
		height:20rpx;
	}
	:deep(.uv-steps-item__line){
		left:10rpx;
		background-color: #0C6F6A !important;
	}
	:deep(.uv-steps-item__wrapper__dot){
		background:#0C6F6A !important;
		width:10rpx;
		height:10rpx;
	}
	:deep(.uv-steps-item__content){
		margin-left:10rpx !important;
	}
	.more-btn{
		justify-content: center;
		color:#fff;
		.more-ico{
			width:24rpx;
			height:24rpx;
			margin-left:10rpx;
		}
	}
	.steps-content{
		width:690rpx;
		margin:30rpx auto;
		background: #EBF3FF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #26B4AC;
		padding:30rpx;
		box-sizing: border-box;
		.steps-title{
			.title{
				font-size:30rpx;
			}
			.time{
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(12,111,106,0.4);
			}
		}
		.steps-desc{
			
			.d-imgs{
				background: rgba(4, 60, 40, 0.10);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #B5D3FF;
				padding:15rpx;
				margin-top:15rpx;
				flex-wrap: wrap;
				image{
					width:115rpx;
					height:115rpx;
					margin-right:10rpx;
				}
			}
			.d-more{
				text-align: right;
				font-weight: 400;
				font-size: 24rpx;
				color: #0C6F6A;
				margin-top:10rpx;
			}
		}
	}
</style>